<!-- 站点信息 -->
<div class="shrink-0 max-xl:mx-0 ml-2 mb-2 overflow-hidden rounded-lg" th:with="info=${@webTag.getCmsTheme('nice')}">
  <div
    class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700"
  >
    <h6 class="flex">
      <svg
        class="w-6 h-6 mb-2"
        aria-hidden="true"
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        fill="none"
        viewBox="0 0 24 24"
      >
        <path
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M4 4v15a1 1 0 0 0 1 1h15M8 16l2.5-5.5 3 3L17.273 7 20 9.667"
        ></path>
      </svg>
      <span class="pl-2">站点信息</span>
    </h6>
    <ul class="max-w-xl space-y-1 list-disc list-insid">
      <li class="flex justify-between mr-8">
        <span>主题名:</span>
        <span th:text="${info.themeName}">99</span>
      </li>
      <li class="flex justify-between mr-8">
        <span>作者:</span>
        <span th:text="${info.themeAuthor}">99</span>
      </li>
      <li class="flex justify-between mr-8">
        <span>文章数:</span>
        <span th:text="${@articleTag.selectArticleNum('nice')}">99</span>
      </li>
      <li class="flex justify-between mr-8">
        <span>标签数:</span>
        <span th:text="${@articleTag.selectArticleNum('nice')}">99</span>
      </li>
      <li class="flex justify-between mr-8">
        <span>建站时间:</span>
        <span th:text="${#dates.format(info.createTime, 'yyyy/MM/dd HH/mm')}">99</span>
      </li>
      <li class="flex justify-between mr-8" th:with="end=${#dates.format(new java.util.Date(), 'yyyy/MM/dd/HH/mm/ss')}, 
      start=${#dates.format(info.createTime, 'yyyy/MM/dd/HH/mm/ss')}">
        <span>运行时间:</span>
        <span id="runDay"  th:data-end-time="${end}" th:data-start-time="${start}">99</span>
      </li>
      <li class="flex justify-between mr-8">
        <span>最后更新时间:</span>
        <span th:text="${#dates.format(info.articleLastInsert, 'yyyy/MM/dd HH:mm')}">99</span>
      </li>
    </ul>
  </div>
</div>

<script>
		document.addEventListener('DOMContentLoaded', function() {
    const itemCount = document.querySelector('#runDay');
        const endTimeStr = itemCount.dataset.endTime;
        const startTimeStr = itemCount.dataset.startTime;
        const [endYear, endMonth, endDate, endHours, endMinutes,endSconds] = endTimeStr.split('/');
        const [startYear, startMonth, startDate, startHours, startMinutes,startSconds] = startTimeStr.split('/');

        const endTime = new Date(endYear, endMonth - 1, endDate, endHours, endMinutes,endSconds);
        const startTime = new Date(startYear, startMonth - 1, startDate, startHours, startMinutes,startSconds);

        const timeDiff = endTime.getTime() - startTime.getTime();
        const diffSeconds = Math.abs(timeDiff) / 1000;
        var days = Math.floor(diffSeconds / (24 * 60 * 60));
        var hours = Math.floor((diffSeconds % (24 * 60 * 60)) / (60 * 60));
        var minutes = Math.floor((diffSeconds % (60 * 60)) / 60);
		var seconds = Math.floor(diffSeconds % 60);
		itemCount.textContent = `${days}天${hours}时${minutes}分${seconds}秒`;
        // 定期更新运行时间显示（每秒更新一次）
        setInterval(() => {
        runTime();
    }, 1000);

	function runTime(){
		  seconds+=1;
        if(seconds>60)
		{   minutes+=1;
			seconds=1;
		}
		if(minutes>59)
		{   hours+=1;
			minutes=0;
		}
		if(hours>23)
		{   days+=1;
			hours=0;
		}
		itemCount.textContent = `${days}天${hours}时${minutes}分${seconds}秒`;
}
    });

</script>